<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="规则配置" name="DefaultConfig">

      <el-form-item label="是否开发环境：">
        <el-radio-group v-model="configValue.develop">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">开启</el-radio-button>
        </el-radio-group>
        <span class="tip">开发环境不发送验证码</span>
      </el-form-item>

      <el-form-item label="显示错误日志：">
        <el-radio-group v-model="configValue.openDebugLog">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">显示</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="显示异常日志：">
        <el-radio-group v-model="configValue.showAnomalyLog">
          <el-radio-button :value="0">关闭</el-radio-button>
          <el-radio-button :value="1">显示</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="超级验证码：">
        <el-input v-model="configValue.specialCode" placeholder="超级验证码"/>
        <span class="tip">注: 必须配置长度 >= 6 才生效</span>
      </el-form-item>

      <el-form-item label="每日最大数量：">
        <el-input-number v-model="configValue.sendMaxCount" :min="1" :step="1" controls-position="right"/>
        <span class="tip">每日最大发送条数</span>
      </el-form-item>

      <el-form-item label="验证错误次数：">
        <el-input-number v-model="configValue.errorMaxCount" :min="1" :step="1" controls-position="right"/>
        <span class="tip">验证错误次数限制</span>
      </el-form-item>

      <el-form-item label="验证码过期时间：">
        <el-input-number v-model="configValue.expireTime" :min="1" :step="1" controls-position="right"/>
        <span class="tip">验证码过期时间 单位秒</span>
      </el-form-item>

      <el-form-item label="验证码信息模板：">
        <el-input v-model="configValue.codeTemplate" :autosize="{ minRows: 2, maxRows: 3}" placeholder="验证码信息模板" type="textarea"/>
      </el-form-item>

      <el-form-item label="Ip地址次数限制：">
        <el-input-number v-model="configValue.ipAddressMaxCount" :min="0" :step="1" controls-position="right"/>
        <span class="tip">Ip地址请求验证码的最大次数(0:无限制)</span>
      </el-form-item>

      <el-form-item label="Ip地址时间限制：">
        <el-input-number v-model="configValue.ipAddressTime" :min="0" :step="1" controls-position="right"/>
        <span class="tip">Ip地址限制过期时间 (单位:小时 0:按天计算)</span>
      </el-form-item>
    </el-tab-pane>

    <el-tab-pane label="平台配置" name="PlatformConfig">
      <el-form-item label="验证码平台：">
        <el-select v-model="configValue.platformType" placeholder="请选择平台" value="" @change="handleChangePlatformType">
          <el-option :key="1" :value="1" label="飞鸽传书"/>
          <el-option :key="2" :value="2" label="阿里云直连"/>
          <el-option :key="3" :value="3" label="阿里云转发"/>
        </el-select>
        <el-link v-if="configValue.platformType === 1" href="https://e.4321.sh/#/" style="font-size: 13px;margin-left: 8px" target="_blank">飞鸽传书</el-link>
      </el-form-item>

      <div v-if="configValue.platformType > 0" class="config-list">
        <el-table :data="platformList" fit highlight-current-row>
          <template v-if="configValue.platformType == 1">
            <el-table-column align="center" label="Api接口" min-width="220" prop="apiUrl">
              <template #default="scope">
                <el-input v-model="scope.row.apiUrl" placeholder="请输入Api接口"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="账号" min-width="160" prop="account">
              <template #default="scope">
                <el-input v-model="scope.row.account" placeholder="请输入账号"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="密匙" min-width="220" prop="password">
              <template #default="scope">
                <el-input v-model="scope.row.password" placeholder="请输入密匙"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="签名ID" min-width="180" prop="signName">
              <template #default="scope">
                <el-input v-model="scope.row.signName" placeholder="请输入签名ID"/>
              </template>
            </el-table-column>
          </template>

          <template v-if="configValue.platformType == 2">
            <el-table-column align="center" label="AccessKeyId" min-width="220" prop="account">
              <template #default="scope">
                <el-input v-model="scope.row.account" placeholder="AccessKeyId"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="AccessKeySecret" min-width="220" prop="password">
              <template #default="scope">
                <el-input v-model="scope.row.password" placeholder="AccessKeySecret"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="签名名称" min-width="180" prop="signName">
              <template #default="scope">
                <el-input v-model="scope.row.signName" placeholder="签名名称"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="模版Code" min-width="120" prop="templateCode">
              <template #default="scope">
                <el-input v-model="scope.row.templateCode" placeholder="短信模版Code"/>
              </template>
            </el-table-column>
          </template>

          <template v-if="configValue.platformType == 3">
            <el-table-column align="center" label="网关地址" min-width="220" prop="apiUrl">
              <template #default="scope">
                <el-input v-model="scope.row.apiUrl" placeholder="请输入网关地址"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="账号" min-width="160" prop="account">
              <template #default="scope">
                <el-input v-model="scope.row.account" placeholder="请输入账号"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="接口密码" min-width="220" prop="password">
              <template #default="scope">
                <el-input v-model="scope.row.password" placeholder="请输入接口密码"/>
              </template>
            </el-table-column>

            <el-table-column align="center" label="签名名称" min-width="180" prop="signName">
              <template #default="scope">
                <el-input v-model="scope.row.signName" placeholder="请输入签名名称"/>
              </template>
            </el-table-column>
          </template>

          <el-table-column align="center" fixed="right" label="操作" width="88px">
            <template #default="scope">
              <el-button link type="danger" @click="handleRemoveConfig(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 10px">
          <el-button icon="circle-plus" plain type="primary" @click="handleAddConfig">添加</el-button>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>

import { ref } from 'vue';

defineOptions({name: 'CaptchaRuleConfig'})

const props = defineProps({
  configValue: {
    type: Object,
    required: true
  },
  configType: {
    type: Number,
    default: 0,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  platformList: {
    type: Array,
    default() {
      return []
    }
  }
});

const activeName = ref('DefaultConfig');

const handleChangePlatformType = () => {

};

const handleAddConfig = () => {
  let platformType = props.configValue.platformType || -1
  let apiUrl = platformType === 1 ? 'https://api.4321.sh/sms/send' : platformType === 3 ? 'http://api.wddz.xyz:8001/sms' : ''

  let newData = {
    apiUrl: apiUrl,
    account: '',
    password: '',
    signName: '',
    templateCode: '',
  }
  props.platformList.push(newData)
};

const handleRemoveConfig = (item: any) => {
  props.platformList.splice(props.platformList.indexOf(item), 1);
};
</script>

<style lang="scss" scoped>

</style>
